import React from 'react'
import { _,Container, Button,Breadcrumbs,Typography } from '@/core';
import Header from '@/components/Layout/Header'
import CCarsousel from '@/components/Layout/Carsousel'
import Footer from '@/components/Layout/Footer'
import Empty from '@/components/Layout/Empty'
import Pagination from '@mui/material/Pagination';
import PaginationItem from '@mui/material/PaginationItem';
import { styled, alpha } from '@mui/material/styles';
import InputBase from '@mui/material/InputBase';

const Search = styled('div')(({ theme }) => ({
    position: 'relative',
    borderRadius: theme.shape.borderRadius,
    backgroundColor: alpha(theme.palette.common.white, 0.15),
    '&:hover': {
        backgroundColor: alpha(theme.palette.common.white, 0.25),
    },
    marginLeft: 0,
    marginBottom: '40px',
    width: '100%',
    [theme.breakpoints.up('sm')]: {
        marginLeft: theme.spacing(1),
        width: 'auto',
    },
}));
const SearchIconWrapper = styled('div')(({ theme }) => ({
    padding: theme.spacing(0, 2),
    height: '100%',
    position: 'absolute',
    pointerEvents: 'none',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
}));
const StyledInputBase = styled(InputBase)(({ theme }) => ({
    color: 'inherit',
    '& .MuiInputBase-input': {
        border: "1px solid #8c8888",
        padding: theme.spacing(1, 1, 1, 0),
        // vertical padding + font size from searchIcon
        paddingLeft: `calc(1em + ${theme.spacing(4)})`,
        transition: theme.transitions.create('width'),
        //width: '100%',
        [theme.breakpoints.up('sm')]: {
            width: '24vw',
            '&:focus': {
                width: '24vw',
            },
        },
    },
}));

const getState = function(){
    let pathopt = _.getUrl();
    //
    return {
        menu:pathopt.menu,
        menuKey:pathopt.menuKey,
        search:"",
        loading:false,
        list:[],
        count:0,
        page:1,
        pageSize:10
    }
}

class ListContent extends React.PureComponent {

    goDetail = (item)=>{
        return ()=>{
            _.his.push(`/con/${item.slug}`)
        }
    }

    goSearch = (e)=>{
        if(e.keyCode == 13){
            this.setState({search:e.target.value},this.getList)
        }
    }

    getList = (opt)=>{
        let st = this.state;
        let search = st.search;
        let pm = Object.assign({search},opt);
        pm.pageNum = pm.page;
        this.setState({loading:true})
        _.api("page.search",{params:pm,cancelToken:"search_content"})
            .then((res) => {
                let list = res.rows
                this.setState({
                    count:Math.ceil(res.total/st.pageSize),
                    list:list
                })
            })
            .finally(()=>{
                this.setState({loading:false})
            })
    }

    pageChange = (e,page)=>{
        this.getList({page});
    }

    state = getState()

    UNSAFE_componentWillReceiveProps(nextProps) {
        let state = getState();
        if(state.menuKey != this.state.menuKey){
            this.setState(state,this.getList);
        }
    }

    UNSAFE_componentWillMount(){
        this.setState({search:decodeURIComponent(_.params().key)},this.getList)
    }

    renderList = ()=>{
        let list = this.state.list;
        if(this.state.loading){
            return <Empty type="loading"/>
        }
        if(list.length){
            return (
                <div className="content">
                    {
                        list.map((v,i)=>{
                            let title = v.title.replace(/\<.*\/\>/g,'');
                            return (
                                <div key={i} className="item flr">
                                    <div className="flbox title"><span onClick={this.goDetail(v)}>{title}</span></div>
                                    <div className="flone date">&nbsp;&nbsp;{_.MOMENT(v.deployTime).format('YYYY-MM-DD')}</div>
                                </div>
                            )
                        })
                    }
                </div>
            )
        }else{
            return <Empty />
        }
    }

    render(){
        let st = this.state;
        let list = this.state.list;
        return (
            <React.Fragment>
                <Header/>
                <CCarsousel />
                <Container className="list_content">
                    <div className="rightContent">
                        <div className="fl-center">
                            <Search>
                                <SearchIconWrapper>
                                    <i className="iconfont iconsousuo"></i>
                                </SearchIconWrapper>
                                <StyledInputBase
                                    defaultValue={st.search}
                                    onKeyDown={this.goSearch}
                                    placeholder="检索内容..."
                                    inputProps={{ 'aria-label': 'search' }}
                                />
                            </Search>
                        </div>
                        {this.renderList()}
                        <div className="fl-right">
                            <Pagination
                                count={st.count}
                                onChange={this.pageChange}
                                renderItem={(item) => (
                                    <PaginationItem
                                        {...item}
                                    />
                                )}
                            />
                        </div>
                    </div>
                </Container>
                <Footer/>
            </React.Fragment>
        )
    }
}

export default ListContent;
